<template>
  <div class="cart-page">
    <!-- 页面头部 -->
    <header class="cart-header">
      <button class="back-btn" @click="goBack">← 返回</button>
      <h1 class="page-title">我的购物车</h1>
    </header>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="cart-loading">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <!-- 购物车主体内容 -->
    <main class="cart-content" v-else>
      <!-- 购物车为空 -->
      <div class="cart-empty" v-if="cartList.length === 0">
        <img src="@/assets/空空如也.png" alt="购物车为空" class="empty-img">
        <p class="empty-text">购物车还是空的，快去添加商品吧～</p>
        <button class="go-shopping-btn" @click="goToGoodsList">去购物</button>
      </div>

      <!-- 购物车有商品 -->
      <div v-else>
        <!-- 全选栏 -->
        <div class="cart-all-select">
          <label class="all-select-label">
            <input
                type="checkbox"
                v-model="isAllSelected"
                @change="handleAllSelect"
                class="all-select-checkbox"
            >
            <span class="checkbox-icon"></span>
            <span class="all-select-text">全选</span>
          </label>
          <!-- 全选时显示总消费金额 -->
          <span class="all-selected-total" v-if="isAllSelected">
            全选总金额：¥{{ totalPrice.toFixed(2) }}
          </span>
        </div>

        <!-- 商品列表 -->
        <div class="cart-list">
          <div class="cart-item" v-for="(item, index) in cartList" :key="item.prod_id">
            <!-- 商品勾选框（与全选联动） -->
            <label class="item-checkbox-label">
              <input
                  type="checkbox"
                  v-model="item.isSelected"
                  @change="handleItemSelect"
                  class="item-checkbox"
                  :disabled="item[`updating_${index}`]"
              >
              <span class="checkbox-icon"></span>
            </label>

            <!-- 商品图片 -->
            <div class="goods-img">
              <img :src="item.image_url" alt="商品图片" @error="handleImgError($event)">
            </div>

            <!-- 商品信息（名称、单价、小计） -->
            <div class="goods-info">
              <h3 class="goods-name">{{ item.prod_name }}</h3>
              <div class="goods-price">单价：¥{{ item.prod_price.toFixed(2) }}</div>
              <!-- 小计（基于实时数量计算） -->
              <div class="goods-subtotal">
                小计：<span class="subtotal-value">¥{{ (item.prod_price * item.count).toFixed(2) }}</span>
              </div>
            </div>

            <!-- 数量调整（加减号） -->
            <div class="quantity-control">
              <button
                  class="quantity-btn minus"
                  @click="decreaseQuantity(index)"
                  :disabled="item.count <= 1 || item[`updating_${index}`]"
              >
                -
              </button>
              <input
                  type="number"
                  v-model.number="item.count"
                  class="quantity-input"
                  readonly
                  :disabled="item[`updating_${index}`]"
              >
              <button
                  class="quantity-btn plus"
                  @click="increaseQuantity(index)"
                  :disabled="(item.store && item.count >= item.store) || item[`updating_${index}`]"
              >
                +
              </button>
            </div>

            <!-- 移除购物车按钮 -->
            <button
                class="delete-btn"
                @click="deleteItem(index)"
                :disabled="item[`updating_${index}`]"
            >
              <el-icon :size="18"><Delete /></el-icon>
              <span class="delete-text">移除</span>
            </button>
          </div>
        </div>

        <!-- 结算区域 -->
        <div class="checkout-bar">
          <div class="selected-info">
            已选 <span class="selected-count">{{ selectedCount }}</span> 件商品
            <span class="selected-total">合计：¥{{ selectedTotalPrice.toFixed(2) }}</span>
          </div>
          <button
              class="checkout-btn"
              @click="goToCheckout"
              :disabled="selectedCount === 0 || isSubmitting"
          >
            <span v-if="!isSubmitting">去支付</span>
            <span v-else>处理中...</span>
          </button>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {ElIcon, ElMessage, ElMessageBox} from 'element-plus';
import { Delete } from '@element-plus/icons-vue';
import CartApi from "@/api/cart.js";
import defaultImage from '@/assets/图片加载失败.png';
import ProductApi from "@/api/Product.js";
// 路由实例
const router = useRouter();

// 新增：结算时的加载状态（防止重复点击）
const isSubmitting = ref(false);

// 购物车数据（仅从接口获取）
const cartList = ref([]);
const isLoading = ref(true);
// 初始化：从接口获取购物车数据
// 临时存储需要提示的“超限商品”（避免循环中多次弹窗）
const overLimitProducts = ref([]);

onMounted(async () => {
  try {
    // 步骤1：先获取购物车列表
    const cartRes = await CartApi.getCart();
    const rawCartList = cartRes || [];

    // 步骤2：批量获取所有商品的最新库存（异步操作，用Promise.all优化性能）
    // 先收集所有商品ID，避免循环中重复调用接口
    const prodIds = rawCartList.map(item => item.prod_id);
    // 调用接口获取每个商品的最新库存（假设后端支持批量查询，若不支持则用循环逐个查）
    // 若后端仅支持单个查询：
    const storeResList = await Promise.all(prodIds.map(id => ProductApi.getStore(id)));

    // 把库存结果转成“商品ID-库存”的映射对象，方便后续查询
    const prodStoreMap = {};
    storeResList.forEach(storeItem => {
      prodStoreMap[storeItem.prod_id] = storeItem.store; // 假设返回格式：[{prod_id: 1, store: 10}, ...]
    });

    // 步骤3：处理购物车数据，修正超限数量
    cartList.value = rawCartList.map(item => {
      // 获取当前商品的最新库存（优先用批量查询结果，无结果时用默认值999）
      const latestStore = prodStoreMap[item.prod_id] || 999;
      // 原始数量（默认1，避免null/undefined）
      const originalCount = item.count || 1;
      // 核心：判断数量是否超限，超限则修正为库存上限
      const finalCount = originalCount > latestStore ? latestStore : originalCount;

      // 若有超限，记录下来（用于后续统一提示）
      if (originalCount > latestStore) {
        overLimitProducts.value.push({
          prodName: item.prod_name || '未知商品',
          originalCount,
          latestStore
        });
      }

      // 返回处理后的商品数据
      return {
        ...item,
        isSelected: false, // 勾选状态
        count: finalCount, // 修正后的数量（不超库存）
        store: latestStore // 存储最新库存（而非默认999）
      };
    });

    // 步骤4：统一提示所有超限商品（合并成一条提示，避免弹窗轰炸）
    if (overLimitProducts.value.length > 0) {
      const alertText = overLimitProducts.value.map(prod =>
          `【${prod.prodName}】原数量${prod.originalCount}件，因库存不足已调整为${prod.latestStore}件`
      ).join('；');
      ElMessage.warning(alertText);
    }

  } catch (error) {
    console.error('购物车数据加载失败：', error);
    ElMessage.error('购物车加载异常，请刷新重试');
    cartList.value = []; // 异常时清空列表，避免脏数据
  } finally {
    isLoading.value = false; // 无论成功失败，都结束加载
  }
});

// 全选逻辑（修复：之前未实现具体逻辑）
const isAllSelected = computed({
  get() {
    // 购物车有商品且所有商品都被选中，才返回true
    return cartList.value.length > 0 && cartList.value.every(item => item.isSelected);
  },
  set(val) {
    // 全选框改变时，同步所有商品的勾选状态
    cartList.value.forEach(item => {
      item.isSelected = val;
    });
  }
});

// 单个商品勾选同步全选状态
const handleItemSelect = () => {
  // 无需额外操作，computed的get会自动同步isAllSelected状态
};

// 全选框点击事件
const handleAllSelect = () => {
  // 无需额外操作，computed的set会自动同步所有商品勾选状态
};


// 减少数量
const decreaseQuantity = async (index) => {
  const item = cartList.value[index];
  const tempKey = `updating_${index}`;

  // 1. 防止重复点击
  if (item[tempKey]) return;
  const currentCount = item.count;
  const newCount = currentCount - 1;
  if (newCount < 1) {
    ElMessage.warning(`【${item.prod_name}】数量不能小于1件`);
    return;
  }
  // 3. 标记更新中
  item[tempKey] = true;
  try {
    // 4. 调用接口减少数量
    await CartApi.decreaseCount(item.prod_id);

    // 5. 更新本地数据（数量 + 小计金额）
    item.count = newCount;
    item.money = item.prod_price * newCount; // 同步小计金额
    ElMessage.success(`【${item.prod_name}】数量已更新为 ${newCount} 件`);

    // 6. 强制刷新数组
    cartList.value = [...cartList.value];
  } finally {
    // 7. 取消更新标记
    delete item[tempKey];
  }
};

// 增加数量（含库存限制）
const increaseQuantity = async (index) => {
  const item = cartList.value[index];
  const tempKey = `updating_${index}`; // 临时标记：当前商品是否正在更新

  // 1. 防止重复点击：正在更新时直接返回
  if (item[tempKey]) return;
  const currentCount = item.count;
  const newCount = currentCount + 1;

  // 修复：store定义为普通变量，无需ref（ref用于响应式，此处仅临时存储）
  let store;
  try {
    // 2. 获取最新库存（增加try-catch，避免库存接口失败导致后续无法操作）
    store = await ProductApi.getStore(item.prod_id);
  } catch (error) {
    ElMessage.error('获取库存失败，请重试');
    return;
  }

  // 库存限制检查
  if (newCount > store) {
    ElMessage.warning(`库存不足，最多可购买 ${store} 件`);
    item.count= store;
    return;
  }
  console.log("【${item.prod_name}】当前库存：" + store);

  // 3. 标记更新中，禁用按钮
  item[tempKey] = true;
  try {
    // 4. 调用接口增加数量
    await CartApi.increaseCount(item.prod_id);
    // 5. 接口成功：更新本地数据（数量 + 小计金额）
    item.count = newCount;
    item.money = item.prod_price * newCount; // 同步小计金额
    ElMessage.success(`【${item.prod_name}】数量已更新为 ${newCount} 件`);
    // 6. 强制刷新数组，确保按钮禁用状态实时更新
    cartList.value = [...cartList.value];
  } catch (error) {
    ElMessage.error(`更新数量失败：${error.message || '网络异常'}`);
  } finally {
    // 8. 取消更新标记，恢复按钮可用
    delete item[tempKey];
  }
};


// 删除商品
const deleteItem = async (index) => {
  const item = cartList.value[index];
  // 使用Element Plus的确认弹窗，体验更统一
  try {
    // 捕获取消事件，避免报错
    await ElMessageBox.confirm(
        `确定要移除【${item.prod_name}】吗？`,
        '确认移除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }
    );
  } catch (error) {
    // 用户取消时提示，不执行后续删除
    ElMessage.info('已取消移除操作');
    return;
  }




  const tempKey = `updating_${index}`;
  item[tempKey] = true; // 标记删除中

  try {
    // 调用接口删除（单个商品用prod_id）
    await CartApi.deleteProduct(item.prod_id);
    // 接口成功：从列表中移除
    cartList.value.splice(index, 1);
    ElMessage.success('商品已移除购物车');
  } catch (error) {
    ElMessage.error(`删除失败：${error.message || '网络异常'}`);
  } finally {
    delete item[tempKey]; // 恢复状态
  }
};

// 计算属性：已选商品数量
const selectedCount = computed(() => {
  return cartList.value.reduce((sum, item) => {
    return item.isSelected ? sum + item.count : sum;
  }, 0);
});

// 计算属性：已选商品总价
const selectedTotalPrice = computed(() => {
  return cartList.value.reduce((sum, item) => {
    return item.isSelected ? sum + (item.prod_price * item.count) : sum;
  }, 0);
});

// 计算属性：所有商品总价（全选时使用）
const totalPrice = computed(() => {
  return cartList.value.reduce((sum, item) => {
    return sum + (item.prod_price * item.count);
  }, 0);
});

// 图片加载失败处理
const handleImgError = (e) => {
  e.target.src = defaultImage;
};

// 返回上一页
const goBack = () => {
  router.push('/main')
};

// 前往商品列表
const goToGoodsList = () => {
  router.push('/main');
};

// 前往结算页面
const goToCheckout = async () => {
  const selectedGoods = cartList.value.filter(item => item.isSelected);

  // 1. 无选中商品：直接提示（基础校验）
  if (selectedGoods.length === 0) {
    ElMessage.warning('请选择要结算的商品');
    return;
  }

  // 2. 支付确认提示（告知用户删除后果）
  try {
     await ElMessageBox.confirm(
        `您已选择 ${selectedGoods.length} 件商品，确认前往支付吗？<br/>
      <span style="color:#ff4d4f;">提示：确认后购物车中该部分商品将被清除</span>`,
        '确认前往支付',
        {
          confirmButtonText: '确认支付',
          cancelButtonText: '取消',
          type: 'info',
          dangerouslyUseHTMLString: true,
          center: true
        }
    );
  } catch (error) {
    // 用户点击取消：提示并终止流程
    ElMessage.info('已取消支付操作');
    return;
  }

  // 3. 标记处理中：禁用按钮（确认后再标记，避免用户取消后按钮仍禁用）
  isSubmitting.value = true;
  let deleteSuccess = true;  // 标记删除是否全部成功
  const failedGoods = [];    // 记录删除失败的商品，便于提示

  try {
    // 4. 收集选中商品的prod_id（确保取到正确的唯一标识）
    const selectedProdIds = selectedGoods.map(goods => goods.prod_id);
    if (selectedProdIds.length === 0) {
      throw new Error('未获取到商品ID，无法清除购物车');
    }

    // 5. 循环删除单个商品（支持后端不批量的场景，关键：循环内单独捕获异常）
    for (let i = 0; i < selectedProdIds.length; i++) {
      const prodId = selectedProdIds[i];
      const goods = selectedGoods[i];  // 对应商品信息，用于失败提示
      try {
        // 单个商品删除（失败不阻断整体，继续删除其他商品）
        await CartApi.deleteProduct(prodId);
      } catch (error) {
        deleteSuccess = false;  // 只要有一个失败，整体标记为失败
        failedGoods.push(goods.prod_name);  // 记录失败商品名称
        console.error(`删除商品【${goods.prod_name}】失败：`, error);
      }
    }

    // 6. 处理删除结果：全部成功才跳转，部分失败提示用户
    if (deleteSuccess) {
      // 全部删除成功：跳转结算页面（携带编码后的商品数据）
      router.push({
        path: '/order',
        query: {
          cartData: encodeURIComponent(JSON.stringify(selectedGoods))
        }
      });
      ElMessage.success('购物车商品已清除，正在进入结算页面');
    } else {
      // 部分商品删除失败：提示失败商品，不跳转
      throw new Error(`部分商品删除失败：${failedGoods.join('、')}，请重试`);
    }

  } catch (error) {
    // 7. 整体异常处理（如ID获取失败、部分删除失败）
    ElMessage.error(`结算失败：${error.message || '系统异常，请稍后重试'}`);
  } finally {
    // 8. 强制重置处理状态（无论成功/失败，都确保按钮恢复可用）
    isSubmitting.value = false;
  }
};
</script>

<style scoped>
/* 基础样式 */
.cart-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 加载状态 */
.cart-loading {
  text-align: center;
  padding: 80px 0;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff5722;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 头部样式 */
.cart-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-btn {
  border: none;
  background: transparent;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}

.back-btn:hover {
  color: #ff5722;
}

.page-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0 auto;
}

/* 主体内容 */
.cart-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 空购物车样式 */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 8px;
  padding: 60px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.empty-img {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
  opacity: 0.7;
}

.empty-text {
  font-size: 16px;
  color: #999;
  margin-bottom: 30px;
}

.go-shopping-btn {
  padding: 10px 24px;
  background-color: #ff5722;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.go-shopping-btn:hover {
  background-color: #e64a19;
}

/* 全选栏 */
.cart-all-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 20px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.all-select-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.all-selected-total {
  font-size: 14px;
  color: #ff5722;
  font-weight: 500;
}

/* 复选框样式 */
.checkbox-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 2px;
  margin-right: 8px;
  position: relative;
  transition: all 0.2s;
}

.all-select-checkbox:checked + .checkbox-icon,
.item-checkbox:checked + .checkbox-icon {
  background-color: #ff5722;
  border-color: #ff5722;
}

.all-select-checkbox:checked + .checkbox-icon::after,
.item-checkbox:checked + .checkbox-icon::after {
  content: '✓';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
}

.all-select-checkbox, .item-checkbox {
  display: none;
}

.all-select-text {
  font-size: 14px;
  color: #333;
}

/* 商品列表 */
.cart-list {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f5f5f5;
  gap: 15px;
  transition: background-color 0.2s;
}

.cart-item:hover {
  background-color: #fafafa;
}

/* 商品勾选框 */
.item-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: 2px;
}

/* 商品图片 */
.goods-img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #f9f9f9;
}

.goods-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s;
}

.goods-img img:hover {
  opacity: 0.9;
}

/* 商品信息 */
.goods-info {
  flex: 1;
  min-width: 0;
}

.goods-name {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goods-price {
  font-size: 14px;
  color: #666;
  margin: 0 0 4px;
}

.goods-subtotal {
  font-size: 14px;
  color: #ff5722;
}

.subtotal-value {
  font-weight: 500;
}

/* 数量控制 */
.quantity-control {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}

.quantity-btn:not(:disabled):hover {
  background-color: #f5f5f5;
  border-color: #ff5722;
  color: #ff5722;
}

.quantity-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
  background-color: #fafafa;
  border-color: #eee;
}

.quantity-input {
  width: 50px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  margin: 0 5px;
  font-size: 14px;
  outline: none;
  cursor: default;
}

.quantity-input:focus {
  border-color: #ff5722;
  box-shadow: inset 0 0 0 1px #ff5722;
}

/* 删除按钮 */
.delete-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: #999;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.delete-btn:not(:disabled):hover {
  color: #ff4d4f;
  background-color: #fff8f8;
}

.delete-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.delete-text {
  font-size: 14px;
}

/* 结算区域 */
.checkout-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px 20px;
  margin-top: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.selected-info {
  font-size: 14px;
  color: #333;
}

.selected-count {
  color: #ff5722;
  font-weight: 500;
  margin: 0 4px;
}

.selected-total {
  margin-left: 15px;
  color: #ff5722;
  font-weight: 500;
}

.checkout-btn {
  padding: 12px 30px;
  background-color: #ff5722;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.checkout-btn:hover {
  background-color: #e64a19;
}

.checkout-btn:disabled {
  background-color: #ffb899;
  cursor: not-allowed;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .cart-item {
    flex-wrap: wrap;
    gap: 10px;
  }

  .item-checkbox-label {
    order: 0;
    margin-top: 0;
  }

  .goods-img {
    order: 1;
  }

  .goods-info {
    order: 2;
    width: calc(100% - 120px);
  }

  .quantity-control {
    order: 3;
    margin-left: 32px;
  }

  .delete-btn {
    order: 4;
    margin-left: auto;
    margin-top: 0;
  }

  .checkout-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

  .checkout-btn {
    width: 100%;
    padding: 12px 0;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .goods-info {
    width: 100%;
  }

  .quantity-control {
    margin-left: 32px;
    margin-top: 10px;
  }

  .all-selected-total {
    font-size: 12px;
  }
}
</style>
